JavaScript與HTML(1)

2024 iThome 鐵人賽

DAY 28

JavaScript

入門JavaScript系列第 28 篇

16th鐵人賽

mlin_1229

2024-10-11 23:16:57

64 瀏覽

分享至

JavaScript 與 HTML 的關係

JavaScript 與 HTML 密不可分，因為 JavaScript 是用來操控 HTML 元素的主要工具。HTML 負責網頁的結構和內容，而 JavaScript 負責網頁的互動性，使網頁不再僅僅是靜態顯示，還能動態地響應用戶的操作。

1. HTML 概述

HTML（超文本標記語言）是用來定義網頁結構的語言，透過各種標籤（如 <div>、<p>、<a> 等）來組織文本、圖片、表單等內容。HTML 文件通常是靜態的，它們只是展示網頁的基本內容。

2. JavaScript 在 HTML 中的作用

JavaScript 的主要作用是增強 HTML 的功能，讓靜態的 HTML 結構變得互動化。透過 JavaScript，你可以實現以下功能：

動態改變網頁內容
響應用戶的操作（如點擊按鈕、輸入文本等）
操控 HTML 元素的屬性與樣式
動態生成或刪除 HTML 元素
向伺服器發送請求並動態更新頁面內容（AJAX）

3. 將 JavaScript 添加到 HTML

JavaScript 可以直接嵌入到 HTML 中，最常見的方法是使用 <script> 標籤。

內聯腳本

你可以在 HTML 文件中內聯 JavaScript 代碼：

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Example</title>
</head>
<body>
  <h1>Hello, World!</h1>

  <script>
    document.write("This is JavaScript output!");
  </script>
</body>
</html>

在這個例子中，JavaScript 直接嵌入在 HTML 中，使用 document.write() 方法來向頁面輸出文字。

外部腳本

更常見的做法是將 JavaScript 代碼放在一個單獨的 .js 文件中，然後透過 <script> 標籤來引入這個文件：

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Example</title>
  <script src="app.js"></script>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

這樣可以保持 HTML 與 JavaScript 分離，增加代碼的可維護性。

4. JavaScript 操控 HTML 元素

JavaScript 可以透過 DOM（Document Object Model）來存取和修改 HTML 元素。常見的操作包括：

存取元素：使用 document.getElementById()、document.querySelector() 等方法來選取元素。
修改元素內容：透過 innerHTML 或 textContent 修改元素的內容。
改變屬性：例如改變圖片的 src 屬性或鏈接的 href 屬性。
控制樣式：直接改變 CSS 樣式，例如 element.style.color = 'red';。

範例：動態修改 HTML 元素

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Example</title>
</head>
<body>
  <h1 id="heading">Hello, World!</h1>
  <button onclick="changeText()">Change Text</button>

  <script>
    function changeText() {
      document.getElementById('heading').textContent = 'Text changed!';
    }
  </script>
</body>
</html>

在這個例子中，點擊按鈕後，JavaScript 會改變 <h1> 標籤的內容。

5. JavaScript 與 HTML 事件處理

JavaScript 可以監聽和處理來自使用者的事件，這是將靜態 HTML 變為動態應用的關鍵。常見的事件包括：

滑鼠事件：如 click、mouseover、mouseout 等。
鍵盤事件：如 keydown、keyup 等。
表單事件：如 submit、change、input 等。

範例：按鈕點擊事件

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Events</title>
</head>
<body>
  <button id="myButton">Click Me</button>

  <script>
    document.getElementById('myButton').addEventListener('click', function() {
      alert('Button clicked!');
    });
  </script>
</body>
</html>

在這裡，當用戶點擊按鈕時，會觸發一個彈出對話框顯示訊息。

6. JavaScript 動態生成 HTML

除了操作現有的 HTML 元素外，JavaScript 還可以動態生成新的 HTML 元素並插入到頁面中。

範例：動態生成列表

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Example</title>
</head>
<body>
  <ul id="myList"></ul>
  <button onclick="addItem()">Add Item</button>

  <script>
    function addItem() {
      const ul = document.getElementById('myList');
      const li = document.createElement('li');
      li.textContent = 'New Item';
      ul.appendChild(li);
    }
  </script>
</body>
</html>

每次點擊按鈕時，JavaScript 會動態創建一個新的 <li> 元素，並添加到列表中。

7. AJAX 與動態內容更新

JavaScript 通常用來發送和接收 HTTP 請求，這讓網頁可以在不重新加載的情況下更新內容。AJAX（Asynchronous JavaScript and XML）技術允許我們在背景中與伺服器通信。

範例：使用 `fetch` 發送 AJAX 請求

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript AJAX Example</title>
</head>
<body>
  <button onclick="fetchData()">Fetch Data</button>
  <div id="output"></div>

  <script>
    function fetchData() {
      fetch('https://jsonplaceholder.typicode.com/posts/1')
        .then(response => response.json())
        .then(data => {
          document.getElementById('output').textContent = data.title;
        });
    }
  </script>
</body>
</html>

這裡的 JavaScript 透過 fetch API 發送一個 HTTP 請求，並在接收到數據後更新頁面內容。